<template>
  <div class="p-3">
    <a-card style="height: 820px" :bordered="false">
      <a-segmented v-model:value="value" :options="data" />
      <template v-if="value == '数据字典类型'">
        <a-form layout="inline" class="mt-3">
          <a-form-item label="数据字典类型">
            <a-select
              v-model:value="type"
              :options="typeOptions"
              style="width: 180px"
              placeholder="请选择数据字典类型"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onSearch"
              ><SearchOutlined />查询</a-button
            >
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onAdd"
              ><PlusOutlined />新增</a-button
            >
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          row-key="id"
          class="mt-3"
        >
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'action'">
              <a-button type="link" @click="onEdit(record)">编辑</a-button>
              <a-popconfirm
                placement="bottom"
                ok-text="是"
                cancel-text="否"
                title="确认删除吗？"
                @confirm="onDel(record)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </template>
      <template v-if="value == '数据字典'">
        <a-form layout="inline" class="mt-3">
          <a-form-item label="数据字典类型">
            <a-select
              v-model:value="type"
              :options="typeOptions"
              style="width: 180px"
              placeholder="请选择数据字典类型"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onSearch2"
              ><SearchOutlined />查询</a-button
            >
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onAdd2"
              ><PlusOutlined />新增</a-button
            >
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns2"
          :data-source="dataSource2"
          :pagination="pagination2"
          row-key="id"
          class="mt-3"
        >
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'action'">
              <a-button type="link" @click="onEdit2(record)">编辑</a-button>
              <a-popconfirm
                placement="bottom"
                ok-text="是"
                cancel-text="否"
                title="确认删除吗？"
                @confirm="onDel2(record)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </template>
    </a-card>
    <a-modal
      :title="title + '字典信息'"
      :visible="isModal"
      @cancel="isModal = false"
      @ok="submit"
    >
      <a-form
        :model="subForm"
        :label-col="labelCol"
        ref="subRef"
        v-if="value == '数据字典类型'"
      >
        <a-form-item label="分类名称" name="userType">
          <a-input v-model:value="subForm.useType" />
        </a-form-item>
        <a-form-item label="字段名称" name="types">
          <a-input v-model:value="subForm.types" />
        </a-form-item>
        <!-- <a-form-item label="分类拼接字段名称" name="userTypes">
          <a-input v-model:value="subForm.userTypes" />
        </a-form-item> -->
      </a-form>
      <a-form
        :model="subForm"
        :label-col="labelCol"
        v-if="value == '数据字典'"
        ref="subRef"
      >
        <a-form-item label="数据字典类型">
          <a-select
            v-model:value="type"
            :options="typeOptions"
            style="width: 180px"
            placeholder="请选择数据字典类型"
            disabled
          />
        </a-form-item>
        <a-form-item label="数据字典代码" name="valueName">
          <a-input v-model:value="subForm.valueName" style="width: 180px" />
        </a-form-item>
        <a-form-item label="描述" name="describes">
          <a-input v-model:value="subForm.describes" style="width: 180px" />
        </a-form-item>
        <a-form-item label="序号" name="orders">
          <a-input v-model:value="subForm.orders" style="width: 180px" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import {
  getDictionary,
  getDictionary2,
  delDictionary,
  delDictionary2,
  addDictionary,
  addDictionary2,
  editDictionary,
  editDictionary2,
} from '#/api/core/setting';
import {
  SearchOutlined,
  PlusOutlined,
  ReconciliationOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const data = ref(['数据字典', '数据字典类型']);
const value = ref('数据字典');
const title = ref('新增');
const type = ref(null);
const subRef = ref(null);
const isModal = ref(false);
const subForm = ref({
  useType: '',
  types: '',
  userTypes: '',
  valueName: '',
  describes: '',
  orders: '',
});
const labelCol = { style: { width: '150px' } };
const columns = [
  {
    title: '字段分类名称',
    dataIndex: 'types',
    key: 'types',
  },
  {
    title: '字段名称',
    dataIndex: 'useType',
    key: 'useType',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];
const columns2 = [
  {
    title: '编号',
    dataIndex: 'orders',
    key: 'orders',
  },
  {
    title: '字段名称',
    dataIndex: 'useType',
    key: 'useType',
  },
  {
    title: '字段值',
    dataIndex: 'valueName',
    key: 'valueName',
  },
  {
    title: '数据字典含义',
    dataIndex: 'describes',
    key: 'describes',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];
const dataSource = ref([]);
const dataSource2 = ref([]);
const typeOptions = ref([]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const pagination2 = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch2();
  },
});
const getSelect = () => {
  getDictionary(1, 99999).then((res: any) => {
    console.log(res);
    typeOptions.value = res.data.map((item) => {
      return {
        label: item.useTypes,
        value: item.id,
      };
    });
  });
};
getSelect();
const onSearch = () => {
  getDictionary(pagination.current, pagination.pageSize).then((res: any) => {
    // console.log(res);
    dataSource.value = res.data;
    pagination.total = res.total;
  });
};
const onSearch2 = () => {
  getDictionary2(pagination.current, pagination.pageSize, type.value).then(
    (res: any) => {
      // console.log(res);
      dataSource2.value = res.data;
      pagination2.total = res.total;
    },
  );
};
const onDel = (record: any) => {
  console.log(record);
  delDictionary(record.id).then((res: any) => {
    if (res == 1) {
      message.success('删除成功');
      onSearch();
    } else {
      message.error('删除失败');
    }
  });
};
const onDel2 = (record: any) => {
  console.log(record);
  delDictionary2(record.id).then((res: any) => {
    console.log(res);
    if (res.code == 1) {
      message.success('删除成功');
      onSearch2();
    } else {
      message.error('删除失败');
    }
  });
};
const onAdd = () => {
  title.value = '新增';
  isModal.value = true;
  subRef.value.resetFields();
};
const onAdd2 = () => {
  title.value = '新增';
  isModal.value = true;
  subRef.value.resetFields();
};
const onEdit = (record: any) => {
  title.value = '编辑';
  isModal.value = true;
  subForm.value = { ...record };
};
const onEdit2 = (record: any) => {
  title.value = '编辑';
  isModal.value = true;
  subForm.value = { ...record };
};
const submit = () => {
  if (value.value == '数据字典' && title.value == '新增') {
    const data = {
      id: type.value,
      valueName: subForm.value.valueName,
      describes: subForm.value.describes,
      orders: subForm.value.orders,
    };
    addDictionary2(data).then((res: any) => {
      console.log(res);
      if (res.code == 200) {
        message.success('新增成功');
        isModal.value = false;
        onSearch2();
      } else {
        message.error('新增失败');
      }
    });
  } else if (value.value == '数据字典类型' && title.value == '新增') {
    const data = {
      useType: subForm.value.userType,
      types: subForm.value.types,
    };
    addDictionary(data).then((res: any) => {
      console.log(res);
      if(res==1) {
        message.success('新增成功');
        isModal.value = false;
        onSearch();
      } else {
        message.error('新增失败');
      }
    });
  } else if (value.value == '数据字典' && title.value == '编辑') {
    console.log(subForm.value);
    const data = {
      id: subForm.value.id,
      valueName: subForm.value.valueName,
      describes: subForm.value.describes,
      orders: subForm.value.orders,
    };
    editDictionary2(data).then((res: any) => {
      console.log(res);
      if (res.code == 200) {
        message.success('编辑成功');
        isModal.value = false;
        onSearch2();
      } else {
        message.error('编辑失败');
      }
    });
  } else if (value.value == '数据字典类型' && title.value == '编辑') {
    const data = {
      id: subForm.value.id,
      useType: subForm.value.useType,
      types: subForm.value.types,
    };
    editDictionary(data).then((res: any) => {
      // console.log(res);
      if(res==1) {
        message.success('编辑成功');
        isModal.value = false;
        onSearch();
      } else {
        message.error('编辑失败');
      }
    });
  }
};
</script>
<style scoped>
:deep(.ant-segmented-item-selected) {
  font-weight: bold;
  color: #006be6;
}
</style>
